<template>
    <base-breadcrumb :title="$route.meta.title">
        <!-- 每月一学、每月一案 -->
        <a-form-model
                ref="ruleForm"
                :model="form"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                :rules="editModel != 0 ? rules : {}"
        >
            <a-spin :spinning="loading">
                <!-- 表格 -->
                <a-card :bordered="false">
                    <title-name title="项目基本信息"></title-name>
                    <custom-form
                            @getOption="(name, e) => (name === 'formId' ? (formCode = e.code) : null)"
                            :formList="formList"
                            :form="form"
                            :editModel="editModel == 0 ? 'V' : ''"
                    >
                        <!--选择时间-->
                        <template #monthTime>
                            <template v-if="editModel != 0">
                                <a-month-picker placeholder="请选择月份"  :default-value="moment(new Date(), monthFormat)" :format="monthFormat" @change="onChange"/>
                            </template>
                            <span v-else> {{ form.monthTime }}</span>
                        </template>
                         <!--附件上传-->
                        <template #fileList>
                            <template v-if="editModel != 0">
                                <l-table :fileAutoLoading="false"  businessCode="UN03" :uploadArrys.sync="form.fileList"></l-table>
                                <div class="file_prompt">
                                    请上传原件，支持格式：.rar .zip .doc .docx .pdf .jpg .png .mp4 .mov
                                </div>
                            </template>
                            <file-link v-else :fileList="form.fileList"></file-link>
                        </template>
                    </custom-form>
                </a-card>
            </a-spin>
            <!-- 页脚操作栏 -->
            <div class="btn_box page-btn-right-top">
                <a-button :loading="loadingSub" v-if="editModel != 0" type="primary" class="button_right" @click="handleSubmit()">提交</a-button>
                <a-button type="primary" @click="handleActiveClose">关闭</a-button>
            </div>
        </a-form-model>
    </base-breadcrumb>
</template>

<script>
  import { create, update, detail } from '@/api/disciplineInspection/culturalEducation/month' // api
  import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
  import SelectSupevise from '@/components/Select/SelectSupevise'
  import SelectUndertaking from '@/components/Select/SelectUndertaking'
  // import Selector from '@/components/Select/Selector'
  import { getEmployeesList } from '@/api/commons.js'
  import { getLabels } from '@/api/office/supervise.js'
  import { getEmployees } from '@/api/businessAffairs/revenueAndCost'
  import moment from 'moment';

  export default {
    name:'a'+ Date.now(),
    extends: new BaseEditPage(),
    data() {
      return {
        // moment,
        loading: false, // 加载控件
        loadingSub: false, // 加载按钮
        editModel: this.$route.query.editModel, // 操作状态:0 查看;1 编辑;2 新增
        monthFormat: 'YYYY-MM',
        form: {
          monthTime: new Date().getFullYear() + '-' + (new Date().getMonth()+1),
        }, // 表单
        rules: {
          monthTime: [{ required: true, message: '请选择月份', trigger: 'change' }],
          title: [{ required: true, message: '请输入学习名称', trigger: 'change' }],
          content: [{ required: true, message: '请输入学习内容', trigger: 'change' }],
          fileList: [{ required: true, message: '请上传文件', trigger: 'blur' }],
        }, // 校验规则
        init: false, // 初始化控件
        formCode: '', // 形式选中项code
        code: '' // 附件上传的businessCode
      }
    },

    watch: {
    },
    computed: {
      formList() {
        const curDate = new Date();
        // const newDate = curDate.getFullYear() + '-' + (curDate.getMonth()+1);
        const monthFormat = 'YYYY-MM'
        return [
          {
            slot: true,
            keyName: 'monthTime',
            label: '月份',
            placeholder: '请选择日期',
          },
          // {
          //   keyName: 'monthTime',
          //   viewName: 'monthTime',
          //   type: 'a-month-picker',
          //   label: '月份',
          //   placeholder: '请选择日期',
          //   attrs:{
          //     format: monthFormat
          //   }
          // },
          {
            keyName: 'title',
            viewName: 'title',
            type: 'a-input',
            label: '学习名称',
            span:this.editModel ==0 ? 16 : 8
          },
          {
            keyName: 'content',
            viewName: 'content',
            type: 'BaseTextarea',
            label: '学习内容',
            autoSize:{ minRows: 10, maxRows: 10 },
            attrs: {
              maxLength : 1000,
            },
            span:24
          },
          {
            slot: true,
            keyName: 'fileList',
            label: '附件',
            span: 24,
          },
        ]
      },
    },
    methods: {
      moment,
      /**
       * 月份选择
       **/
      onChange(date, dateString) {
        this.form.monthTime = dateString
      },
      /**
       * 校验表单
      **/
      handleSubmit() {
        // 提交表单
        this.$refs.ruleForm.validate((e) => {
          if (e) {
            this.handleSubmitApi()
          }
        })
      },
      /**
       * 提交表单
       */
      handleSubmitApi(){
        let that = this
        let api = [update, create][that.editModel - 1] // 根据操作切换url地址
        that.loading = true
        that.loadingSub = true
        let formData = that.$clone(that.form)
        let form={
          ...formData,
          fileId: formData.fileList.map(item =>{return item.commonId}).toString(),
          orgId:JSON.parse(sessionStorage.getItem('ycloud-user_info')).currentPost.id
        }
        console.log(form)
        api(form)
          .then(() => {
            that.loading = false
            that.$message.success('保存成功！')
            that.$multiTab.close()
          })
          .catch(() => {
            that.loading = false
          })
      },
    },
    mounted(){
      this.$route.meta.title = ['每月一学、每月一案查看', '每月一学、每月一案编辑', '每月一学、每月一案新增'][this.editModel]
      /**
       * 不为添加时请求详情
       * */
      if (this.editModel != 2) {
        this.loading = true
        detail(this.id)
          .then((res) => {
            this.loading = false
            this.form = res.data
            this.form.fileList =res.data.fileInfoVOS
            this.$nextTick(() => {
              this.init = true
            })
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.$nextTick(() => {
          this.init = true
        })
      }
    }
  }
</script>

<style lang="less" scoped>
    /deep/ .ant-form-item {
        .ant-form-item-label {
            height: 28px;
            width: 200px;
            line-height: 22px;
            padding: 6px 4px 0 0;
            text-align: right;
            white-space: pre-wrap;
            overflow: visible;
        }
        .ant-form-item-control-wrapper {
            width: calc(100% - 200px);
        }
    }
    .file_prompt {
        color: #999;
    }
</style>